<template>
<div class="shop__item">
    <img :src="item.imgUrl" class="shop__item__img" />
    <div class="shop__content">
        <div class="shop__content__title">{{item.name}}</div>
        <div class="shop__content__tags">
            <span class="shop__content__tag">月销：{{item.sales}}</span>
        </div>
        <div class="shop__content__highlight">{{item.slogan}}</div>
    </div>
</div>
</template>

<script>
export default {
  name: 'ShopInfo',
  props:['item']
}
</script>

<style lang="scss" scoped>
@import '../style/viriables.scss';
  .shop__item{
    display: flex;
    padding-top:0.12rem;
    &__img{
      width: .56rem;
      height: .56rem;
      margin-right: 0.16rem;
    }
  }

  .shop__content{
        flex: 1;
        padding-bottom:0.12rem;
        border-bottom: 1px solid $content-bgColor;
        &__title{
            line-height: .22rem;
            font-size: .16rem;
            color: $content-fontcolor;
        }
        &__tags{
            margin-top:0.08rem;
            line-height: .18rem;
            font-size: .13rem;
            color: $content-fontcolor;
        }
        &__tag{
            margin-right: 0.16rem;
        }
        &__highlight{
            margin-top:0.08rem;
            line-height: .18rem;
            font-size:.13rem;
            color:$hightlight-fontColor;
        }
   }

</style>
